<template>
  <div class="max-box">
    <form action="/">
      <van-search v-model="hotSearch" show-action shape="round" background="#e4463b" @search="SearchSuggest" @focus="onFocus" @input="onInput" @blur="onblur" @cancel="onCancel" @clear="onclear" />
    </form>
    <div class="hot-search-box" v-show="!hotSearchBox">
      <!-- 搜索历史 -->
      <div v-show="historyList.length" class="history">历史：
        <van-tag v-for="item in historyList" :key='item' @click="history" round type="primary" color="#f4f6f6" text-color="#666">{{item}}</van-tag>
        <van-tag round closeable type="primary" color="#f4f6f6" text-color="#666" @close="deleteHistory">删除</van-tag>
      </div>
      <!--搜索热词组件-->
      <hot-search :hotKeywordList="hotKeywordList" @hotWordSearch="hotWordSearch" />
    </div>
    <!-- 搜索音乐展示列表组件 -->
    <search-music-list :searchList="searchList" :hotSearch="hotSearch" v-show="hotSearchBox" />
  </div>
</template>

<script  type='module'>
// 热搜榜
import HotSearch from './components/HotSearch'
// 搜索音乐展示列表组件
import SearchMusicList from './components/SearchMusicList'
export default {
  name: 'Search',
  data () {
    return {
      // 搜索默认值
      hotSearch: '',
      hotKeywordList: [],
      // 搜索音乐展示列表
      searchList: [],
      // 搜索历史列表
      historyList: [],
      // 控制搜索列表是否显示
      hotSearchBox: false,
      // 防抖
      flag: null
    }
  },
  components: {
    SearchMusicList,
    HotSearch
  },
  created () {
    // 调用获取搜索默认值函数
    this.searchDefault()
    // 调用获取热词函数
    this.getHotKeyword()
    // 读取内存中的搜索历史
    const historyList = localStorage.getItem('historyList')
    if (historyList) {
      this.historyList = JSON.parse(historyList)
    }
  },
  methods: {
    // 获取搜索默认值函数
    async searchDefault () {
      const res = await this.$http({ url: '/search/default' })
      this.hotSearch = res.data.showKeyword
    },
    // 获取热词函数
    async getHotKeyword () {
      const res = await this.$http({ url: '/search/hot/detail' })
      this.hotKeywordList = res.data
    },
    // 关键词搜索音乐
    async SearchSuggest (val) {
      // if (!this.hotSearch.trim()) {
      //   return this.$notify({ type: 'warning', message: '搜索关键词不能为空！' })
      // }
      this.searchList = []
      const res = await this.$http({ url: '/search', params: { keywords: this.hotSearch, limit: 12 } })
      this.searchList = res.result.songs.map(item => ({
        id: item.id,
        name: item.name,
        ar: item.artists[0].name, // 歌手列表
        al: { // 专辑信息
          name: item.album.name,
          picUrl: item.album.artist.img1v1Url
        }
      }))
      // console.log(res.result.songs)
      // console.log(this.searchList)
      this.hotSearchBox = true
      // 搜索词存到搜索历史列表
      this.historyList.unshift(this.hotSearch)
      // 数组去重
      this.historyList = [...new Set(this.historyList)]
      // 搜索历史列表存到内存
      localStorage.setItem('historyList', JSON.stringify(this.historyList))
    },
    onCancel (val) {
      this.$router.go(-1)
    },
    // 点击清空搜索框
    onclear () {
      this.hotSearchBox = false
    },
    // 点击清除历史记录
    deleteHistory () {
      localStorage.removeItem('historyList')
      this.historyList = []
    },
    // 获得焦点搜索建议
    onFocus () {
      if (!this.hotSearch.trim()) {
        return false
      }
      this.SearchSuggest()
      this.hotSearchBox = true
    },
    // 输入框内容变化时触发
    onInput () {
    // 防抖
      if (!this.flag) {
        if (!this.hotSearch.trim()) {
          this.hotSearchBox = false
          return false
        }
        // 调用搜索
        this.SearchSuggest()
        this.hotSearchBox = true
        this.flag = true
      }
      setTimeout(() => {
        this.flag = null
      }, 1500)
    },
    onblur () {
      this.hotSearchBox = false
    },
    // 点击历史记录
    history (e) {
      this.hotSearch = e.target.innerHTML
      // 调用搜索
      this.SearchSuggest()
    },
    hotWordSearch (Word) {
      this.hotSearch = Word
      // 调用搜索
      this.SearchSuggest()
    }
  }
}
</script>

<style scoped lang="less">
.max-box {
  .keyword {
    font-size: 13px;
    line-height: 40px;
  }
  .hot-search-box {
    .history {
      margin-top: 10px;
      font-size: 14px;
      .van-tag {
        margin: 5px;
      }
    }
    margin: 0 16px;
    .img {
      width: 15px;
      height: 15px;
      margin-left: 5px;
    }
  }
}
</style>
